<template>
  <view class="friends-content" :style="friendsContentStyle">
    <viewTaskTime ref="viewTaskTime"></viewTaskTime>
    <!--    日常任务浏览圈子-->
    <scroll-view class="friends-list" :scroll-y="true" @scrolltolower="end" lower-threshold="200" @scroll="onscroll"
                 :scroll-top="scrollTop" refresher-enabled="true" :refresher-triggered="triggered"
                 :refresher-threshold="100" refresher-background="#fff"
                 @refresherrefresh="onRefresh">

      <view>
        <banner></banner>
        <view class="tap">
          <view class="tap-item" :class="tapIndex===0?'tap-item-hover':''" @click="setTapIndex(0)">
            最热
            <view class="class-msg-xian" v-if="tapIndex===0"></view>
          </view>
          <view class="tap-item" :class="tapIndex===1?'tap-item-hover':''" @click="setTapIndex(1)">
            最新
            <view class="class-msg-xian" v-if="tapIndex===1"></view>
          </view>
          <view class="tap-item" :class="tapIndex===2?'tap-item-hover':''" @click="setTapIndex(2)">
            同城
            <view class="class-msg-xian" v-if="tapIndex===2"></view>
          </view>
          <view class="msg" @click="toRole">
            奖励规则
          </view>
        </view>
        <view class="friends-item" v-for="(i,index) in list" :key="index" @click="toDetail(i,index)">
          <view class="friends-user-info">
            <view class="user-img">
              <image :src="i.avatar"></image>
              <!--            <view class="icon" v-if="index<3 && index>=0">-->
              <!--              <image mode="aspectFit" :src="image_host+'icon_comment'+(index)+'.png'"></image>-->
              <!--            </view>-->
            </view>
            <view class="user-box">
              <view class="username">{{ i.nickName }}</view>
              <view class="user-badge">
                <daren :type="1" v-if="i.commentLevel>0" :index="i.commentLevel"></daren>
                <daren :type="2" v-if="i.shineLevel>0" :index="i.shineLevel"></daren>
              </view>
            </view>
          </view>
          <view class="message-box">
            <view class="text">
              <text style="word-break: break-all;">{{ i.content }}</text>
            </view>
            <view class="image-list" v-if="i.picUrl">
              <view class="image-item" v-for="(imageItem,imageIndex) in JSON.parse(i.picUrl)" :key="imageIndex"
                    @click.stop="showPreview(imageIndex,JSON.parse(i.picUrl),imageItem)" v-if="!imageItem.isHide">
                <!--              <image :src="imageItem.url"></image>-->
                <image mode="aspectFill" v-if="imageItem.fileType==='image'" class="image" :src="imageItem.url"></image>
                <image mode="aspectFill" v-if="imageItem.fileType==='video'" class="image"
                       :src="imageItem.thumbUrl"></image>
                <view class="video-play" v-if="imageItem.fileType==='video'">
                  <image :src="image_host+'icon_play.png'"></image>
                </view>
                <view class="image-template" v-if="imageItem.templateId>0">
                  <image :src="image_host_template+'t'+imageItem.templateId+'.png'"></image>
                </view>
              </view>
            </view>
            <view class="date">{{ i.createTime }}</view>
            <view class="circle-title" v-if="i.topicTitle" @click.stop="toCircleDetail(i.topicId)">#{{ i.topicTitle }}
            </view>
            <view class="address" v-if="i.market">
              <view class="icon">
                <image :src="image_host+'icon_adress@2x.png'"></image>
              </view>
              <text>{{ i.market }}</text>
            </view>
          </view>
          <view class="buttons">
            <view class="button-item button-item-active" @click.stop="setTopicLike($event,i.id,i.likeFlag,index)">
              <image :src="image_host+(i.likeFlag?'dianzan1.png':'dianzan2.png')" mode="aspectFill"></image>
              <text>{{ $toNum(i.praiseNum || 0) }}支持</text>
            </view>
            <view class="button-item" v-if="!i.owerFlag" @click.stop="toMessage($event,i)">
              <image :src="image_host+'q_icon_pinglun@2x.png'" mode="aspectFill"></image>
              <text>{{ $toNum(i.commentNum || 0) }}评论</text>
            </view>
            <button class="button-item" open-type="share" @click.stop="setShare(i,index)">
              <image :src="image_host+'q_icon_fenxiang@2x(1).png'" mode="aspectFill"></image>
              <text>分享{{ $toNum(i.forwarding || 0) }}</text>
            </button>
          </view>
        </view>
      </view>

    </scroll-view>
    <back-top v-show="showBackTop" @click="backTop"></back-top>
	<comment type="list" @commentHide="$emit('commentHide')" ref="comment"></comment>
    <preview ref="preview" @hide="$emit('commentHide')" style="z-index: 100"></preview>
  </view>
</template>

<script>
import daren from "@/pages/circle/components/daren.vue";
import comment from "@/pages/circle/circleOfFriends/components/comment.vue";
import preview from "@/pages/circle/components/preview.vue";
import AnswerLoading from "@/pages/newAnswer/components/answer-loading.vue";
import Banner from "@/pages/circle/circleOfFriends/components/banner.vue";
import viewTaskTime from "@/pages/circle/circleOfFriends/components/viewTaskTime.vue";
import BackTop from "@/components/back-top/back-top.vue"

export default {
  components: {Banner, AnswerLoading, preview, daren, comment, viewTaskTime, BackTop},
  data() {
    return {
      friendsContentStyle: "padding-bottom: " + uni.getStorageSync('footer-menu').height + 'px;',
      image_host: this.image_host + 'quanzi/',
      image_host_template: this.image_host + 'template/',
      tapIndex: 0,
      info: {},
      FormData: {
        page: 1,
        pageSize: 10,
        orderParam: "",
        lastId: 0
      },
      list: [],
      total: "",
      viewIndex: 0,
      sendIndexList: [],
      scrollTop: '',
      triggered: false,
      isTask: true,
	  systemInfo: uni.getSystemInfoSync(),
	  showBackTop: false
    };
  },
  created() {
    uni.$on("setListSay", (data) => {
      this.list[data.index] = data.info
      this.$forceUpdate()
    })
    this.$nextTick(() => {
      this.getList();
      this.checkItemVisibility()
    })
  },
  methods: {
    setTapIndex(index) {
      this.tapIndex = index;
      this.scrollTop = '';
      uni.showLoading()
      this.$nextTick(() => {
        uni.hideLoading()
        this.scrollTop = 0;
        this.FormData.page = 1;
        this.getList()
      })
    },
    /**
     * 初始化任务
     */
    initTask() {
      this.$refs.viewTaskTime.init()
      this.$refs.viewTaskTime.setEndTime()
      uni.$on("continueFlagTask", () => {
        uni.setStorageSync("taskId", 100)
        uni.$off("continueFlagTask")
      })
      // this.$nextTick(() => {
      //   this.isTask = true
      // })
    },
    destroyTask() {
      this.$refs.viewTaskTime.destroy()
    },
    showPreview(imageIndex, item, imageItem) {
      this.$refs.preview.init(imageIndex, item, imageItem)
      this.$emit('commentShow')
    },
    toMessage(e, item) {
      this.$refs.comment.show(item)
      this.$emit('commentShow')
    },
    async getList() {
      let data = this.FormData;
      data.orderParam = this.tapIndex;
      if (data.page === 1) this.FormData.lastId = 0;
      let res = await this.$javaCircle.doRequest("post", 'circle/customer/say/saySomethingList', data, 'json', false)
      this.list = (data.page === 1 ? [] : this.list).concat(res.data.data.list)
      this.FormData.lastId = res.data.data.list[res.data.data.list.length - 1].id
      this.total = res.data.data.total
      this.triggered = false;
    },
    // 说说点赞
    async setTopicLike(e, id, likeFlag, index) {
      let url = likeFlag ? 'circle/customer/say/sayCancelLike?id=' + id : 'circle/customer/say/sayLike?id=' + id;
      let {data} = await this.$javaCircle.doRequest("get", url, {}, 'json', false)
      if (data.code === 0) {
        this.list[index].likeFlag = !likeFlag;
        this.list[index].praiseNum += !likeFlag ? 1 : -1;
        console.log(this.list[index])
      }
    },
    // 设置转发
    setShare(item, index) {
      this.$emit('setTopicInfo', item)
      this.list[index].forwarding++
      this.$javaCircle.doRequest("get", 'circle/customer/say/saySomethingShare', {id: item.id}, 'json', false)
    },
    toDetail(i, index) {
      uni.navigateTo({url: `/pages/circle/circleOfFriends/details?id=${i.id}&index=${index}&tag=${i.tag}`})
    },
    end() {
      if (this.total > this.FormData.page * this.FormData.pageSize) {
        this.FormData.page++;
        this.getList()
      }
    },
    toCircleDetail(id) {
      uni.navigateTo({url: `/pages/circle/details/details?id=${id}`})
    },
    toRole() {
      uni.navigateTo({url: '/pages/circle/role?type=3'})
    },
    // 上传浏览记录
    sendViewLog(id) {
      // this.$javaCircle.doRequest("get", 'circle/customer/say/sayScan?id=' + id, {}, 'json', false)
    },
	backTop() {
		this.scrollTop = '';
		this.$nextTick(() => {
		  this.scrollTop = 0;
		})
	},
    async onscroll(event) {
      // let index = this.viewIndex; // 要检查的元素索引
      // let itemList = await this.checkItemVisibility()
      // if (itemList.length > 0 && itemList[index].top <= 400 && !this.sendIndexList.includes(index)) {
      //   this.sendIndexList.push(index)
      //   this.sendViewLog(this.list[index].id)
      //   this.viewIndex++
      // }
      // 刷新任务
      // 停止定时器
      clearTimeout(time);
      let time = setTimeout(() => {
        this.$refs.viewTaskTime.tempTime = 5
      }, 1000)
	  if(event.target.scrollTop >= this.systemInfo.windowHeight * 2 && !this.showBackTop) {
		  this.showBackTop = true;
	  } else if(event.target.scrollTop < this.systemInfo.windowHeight * 2 && this.showBackTop) {
		  this.showBackTop = false;
	  }  
    },
    checkItemVisibility() {
      return new Promise((resolve, reject) => {
        const query = uni.createSelectorQuery().in(this); //获得实力
        query.selectAll(".friends-item").boundingClientRect(data => {
          resolve(data)
        }).exec();
      })
    },
    // 上啦刷新
    onRefresh() {
      this.triggered = true
      this.FormData.page = 1;
      this.getList()
    }
  },
}
</script>

<style lang="scss">
.friends-content {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  position: relative;
}

.tap {
  width: 100%;
  display: flex;
  box-sizing: border-box;
  padding: 20upx 30upx 10upx 30upx;
  position: sticky;
  top: 0;
  left: 0;
  background-color: #F3F5F8;
  z-index: 10;
}

.tap .msg {
  position: absolute;
  top: 50%;
  right: 30upx;
  transform: translate(0%, -50%);
  font-size: 28upx;
  color: #585858;
  text-decoration: underline;
}

.tap-item {
  font-size: 42upx;
  color: #666666;
  margin-right: 50upx;
  position: relative;
  transition: all .2s linear;

  .class-msg-xian {
    z-index: 1;
    position: absolute;
    left: 0;
    bottom: 0upx;
    width: 118upx;
    height: 8upx;
    background: linear-gradient(to right, #FD9A00 0%, #fff 100%);
  }
}

.tap-item-hover {
  color: #333;
}

.friends-list {
  flex: 1;
  background-color: #F3F5F8;
  overflow-y: scroll;
  position: relative;
}

.friends-item {
  width: 100%;
  margin-bottom: 24upx;
  background-color: #fff;
  box-sizing: border-box;
  padding: 30upx 24upx 0 24upx;
}

.friends-item .friends-user-info {
  width: 100%;
  height: 100upx;
  display: flex;
  align-items: center;

  .user-img {
    width: 100upx;
    height: 100upx;
    border-radius: 50%;
    background-color: #D8D8D8;
    position: relative;

    image {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }

    .icon {
      width: 78upx;
      height: 70upx;
      position: absolute;
      bottom: -20upx;
      right: -20upx;
    }
  }

  .user-box {
    height: 100%;
    flex: 1;
    margin-left: 18upx;
    display: flex;
    flex-direction: column;
    justify-content: center;

    .username {
      font-size: 32upx;
      color: #666666;
    }

    .user-badge {
      display: flex;
    }
  }
}

.message-box {
  width: 100%;
  box-sizing: border-box;
  padding-left: 118upx;
  padding-bottom: 20upx;
  border-bottom: 1upx solid #D8D8D8;
  margin-top: 8upx;

  .text {
    font-size: 44upx;
    color: #333333;
  }

  .image-list {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    column-count: 3;
    column-gap: 25upx;
    margin-top: 12upx;

    .image-item {
      width: 174upx;
      height: 174upx;
      background-color: #D8D8D8;
      border: 1upx solid #979797;
      margin-bottom: 10upx;
      position: relative;

      image {
        width: 100%;
        height: 100%;
      }
    }

    .video-play {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      background-color: rgba(0, 0, 0, .7);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 2;

      image {
        width: 62upx;
        height: 62upx;
      }
    }
  }

  .date {
    font-size: 28upx;
    color: #999999;
  }

  .circle-title {
    width: fit-content;
    background-color: #E0ECED;
    box-sizing: border-box;
    padding: 0 22upx;
    color: #333;
    font-size: 34upx;
    font-weight: 500;
    border-radius: 25upx;
    margin: 12upx 0;
  }

  .address {
    font-size: 36upx;
    color: #666666;
    display: flex;
    align-items: center;

    .icon {
      margin-right: 10upx;
      width: 26upx;
      height: 32upx;
      display: flex;
      align-items: center;
      justify-content: center;

      image {
        width: 100%;
        height: 100%;
      }
    }
  }
}

.buttons {
  width: 100%;
  height: 98upx;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .button-item {
    width: 30%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26upx;
    color: #666;

    image {
      width: 44upx;
      height: 44upx;
      margin-right: 4upx;
    }
  }
}

button {
  background-color: transparent; /* 设置背景色为透明 */
  border: none; /* 取消边框 */
  padding: 0; /* 设置内边距 */
  color: #ff0; /* 设置文本颜色 */
  cursor: pointer; /* 鼠标悬停时显示为手型 */
  border: 0 solid transparent !important;
}

.image-template {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;

  image {
    width: 100%;
    height: 100%;
  }
}
</style>
